<template>
  <view class="container" style="background-color: #f5f5f5">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar title="我的发布" title-size="36" title-color="#333"></u-navbar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#10A28F"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
        <!-- <u-gap height="20" bg-color="#F0F1F2"></u-gap> -->
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item v-for="(item2, index2) in tabsList" :key="index2" class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[index2]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="goods_area">
              <view class="info_box" v-for="(item, index) in itemList[index2]" :key="index">
                <view class="" style="padding: 15rpx">
                  <view class="box-title dis-flex flex-y-between">
                    <view class="type">生意转让</view>
                    <text class="status" v-if="index == 1">审核中</text>
                    <text class="more" @click="showMoreModel = true" v-else>···</text>
                  </view>
                  <view class="label-group">
                    <text class="label">临街旺铺</text>
                    <text class="label">无转让费</text>
                    <text class="label">低租金</text>
                  </view>

                  <view class="info_box-desc-time">
                    <u-read-more
                      :toggle="true"
                      :shadow-style="shadowStyle"
                      show-height="100"
                      color="#10A28F"
                      close-text="展开"
                      open-text="收起"
                    >
                      <view class="content-view">
                        南明区市中心商圈位置480平特色餐饮因有其他生意整体转让，装修完整，设备齐全，出行交通便利，有需要的请联系，有需要的请联有需要</view
                      >
                    </u-read-more>
                  </view>

                  <view class="info-floor dis-flex flex-y-between flex-y-center">
                    <view class="dis-flex flex-y-center">
                      <u-avatar size="40" src=""></u-avatar>
                      <text class="user"> 用户昵称 </text>
                      <text class="user">2025-03-06 12:00</text>
                    </view>
                    <view class="dis-flex flex-y-center">
                      <u-icon name="/static/users/sxyh.png" size="28"></u-icon>
                      <text class="count-text">分享</text>
                      <u-icon
                        style="margin-left: 20rpx"
                        name="/static/users/lll_icon.png"
                        size="28"
                      ></u-icon>
                      <text class="count-text">3600</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
    <u-popup v-model="showMoreModel" border-radius="20" width="750rpx" height="auto" mode="bottom">
      <view class="more-box">
        <view class="bt-item">置顶</view>
        <u-line></u-line>
        <view class="bt-item">编辑</view>
        <u-line></u-line>
        <view class="bt-item">删除</view>
        <u-gap height="20" bg-color="#EEEEEF"></u-gap>
        <view class="bt-item" @click="showMoreModel = false">取消</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      showMoreModel: false,
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '全部',
          status: ''
        },
        {
          name: '显示中',
          status: 10
        },
        {
          name: '审核中',
          status: 20
        },
        {
          name: '未通过',
          status: 30
        },
        {
          name: '置顶中',
          status: 40
        }
      ],
      shadowStyle: {
        backgroundImage: 'none',
        paddingTop: '0',
        marginTop: '20rpx',
        position: 'absolute',
        top: '19px',
        width: 'auto',
        right: '0',
        background: '#fff',
        padding: '0 10px'
      },
      itemList: [[{}, {}], [], [], [], []]
    }
  },
  computed: {
    formatTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },
  onLoad(res) {},
  onShow() {
    this.queryList()
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.scurrent = e.detail.current
      this.current = e.detail.current
      if (this.itemList[this.current].length == 0) {
        this.queryList()
      }
    },
    queryList(pageNo = 1, pageSize = 10) {
      // this.$u.get(`/app-api/construction/project-info/my-publish-page?pageNo=${pageNo}&pageSize=${pageSize}&status=${this.tabsList[this.current].status}`).then(res=>[
      // 	this.$refs.paging[this.current].complete(res.data.list)
      // ])
    },

    pass(e) {
      uni.dialog.confirm('温馨提示', '确定与施工队线下磋商成功(建议与施工队碰面磋商后确认)', () => {
        this.$u.put('/app-api/construction/project-info/approval-pass', {
          projectId: e.id
        })
      })
    },

    rebut(e) {
      uni.dialog.confirm('温馨提示', '是否取消合作', () => {
        this.$u.put('/app-api/construction/project-info/approval-refuse', {
          projectId: e.id
        })
      })
    },

    onComment(e) {
      uni.navigateTo({
        url: '/other/push-comment/push-comment?id=' + e.id
      })
    },
    onOrderCancel(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消订单吗？', () => {
        self.$u.api.setOrderCancel(item.id).then((res) => {
          self.$u.toast('取消成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onOrderPayment(item) {
      let self = this
      this.$utils.route({
        url: '/goods/payment/payment',
        params: {
          order_id: item.id,
          money: item.pay_price,
          total_weight: item.total_weight,
          delivery_price: item.delivery_price
        }
      })
    },
    onOrderConfrim(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '该订单确认收货吗？', () => {
        self.$u.api.setOrderConfirm(item.id).then((res) => {
          self.$u.toast('收货成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onResellPush(item) {
      this.$utils.route({
        url: '/goods/resell-push/resell-push',
        params: {
          id: item.id
        }
      })
    },
    onPushComment(item) {
      this.$utils.route({
        url: '/other/push-comment/push-comment',
        params: {
          id: item.id
        }
      })
    },
    onOrderDetail(item) {
      // this.$utils.route({
      // 	url: '/pages/order-details/order-details',
      // 	params: {
      // 		id: item.id
      // 	}
      // });
    },
    routeTo(e) {
      uni.navigateTo({
        url: '/other/push-info/push-info?id=' + e.id
      })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  height: 100%;
  /* background: #F0F1F2; */
}

.goods_area {
  padding: 20rpx;
}

.info_box {
  width: 710rpx;
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  .box-title {
    margin-bottom: 20rpx;
    .type {
      // width: 96rpx;
      // height: 36rpx;
      border-radius: 6rpx;
      border: 1px solid #10a28f;
      font-size: 20rpx;
      color: #10a28f;
      text-align: center;
      padding: 2rpx 10rpx;
    }
    .status {
      width: 80rpx;
      height: 36rpx;
      line-height: 36rpx;
      background: #e6f5f3;
      border-radius: 18rpx;
      font-size: 20rpx;
      color: #10a28f;
      // padding: 2rpx 10rpx;
      text-align: center;
    }
    .more {
      width: 80rpx;
      height: 36rpx;
      background: #f0f0f0;
      border-radius: 18rpx;
      text-align: center;
      line-height: 36rpx;
      font-size: 28rpx;
      font-weight: 700;
      letter-spacing: 2rpx;
    }
  }
  .label-group {
    margin-bottom: 20rpx;
    font-size: 20rpx;
    color: #666666;
    .label {
      width: 96rpx;
      height: 36rpx;
      background: #f0f0f0;
      border-radius: 6rpx;
      margin-right: 10rpx;
    }
  }
  .info-floor {
    margin-top: 20rpx;
    .user {
      font-size: 24rpx;
      color: #666666;
      margin-left: 10rpx;
    }
    .count-text {
      margin-left: 10rpx;
    }
  }
}

.info_box-desc-time {
  position: relative;
}
.content-view {
  text-indent: 0;
  font-size: 28rpx;
  color: #333333;
  line-height: 48rpx;
}
.more-box {
  text-align: center;
  .bt-item {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    color: #333333;
  }
}
</style>
